<template>
    <div class="app-container">
        <levelbar></levelbar>
        <el-form label-width="150px" class="app-content" :rules="rules" :model="ruleForm" ref="ruleForm" v-loading="loading">
            <div class="box">
            <div class="appTitle">账户详情</div>
                <div v-if="temp=='0'">
                    <div class="appTop">银行账户信息</div>
                    <div class="boxMin">
                        <!--<el-row>               
                            <el-col :span="9">
                                <pieChart :width="'500px'" :height="'400px'" :pieDataList="pieDataList" :gaterName="gaterName"></pieChart>
                            </el-col>
                        </el-row>-->
                        <el-row>               
                            <el-col :span="9">
                                <el-form-item label="银行开户名：" prop="bank">
                                    {{ruleForm.name}}
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="9">
                                <el-form-item label="账户：" prop="account">
                                    {{ruleForm.account}}
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="9">
                                <el-form-item label="所属银行：" prop="affBank">
                                    {{ruleForm.affBank}}
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="9">
                                <el-form-item label="开户银行所在城市：" prop="bankCity">
                                    {{ruleForm.bankCity}}
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="9">
                                <el-form-item label="开户行名称：" prop="bankName">
                                    {{ruleForm.bankName}}
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="9">
                                <el-form-item label="预留手机号：" prop="phone">
                                    {{ruleForm.phone}}
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="9">
                                <el-form-item>
                                    <span class='contact-color'>若您需修改信息，或有其他问题，还请联系客服：400 600 2588</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div class='status' v-if="temp=='2'">                 
                    <el-row class='status-num'>
                        <el-col :span="13" :offset='4'>
                            <el-form-item>
                                <el-row>
                                    <div class='hourglass'>您的账户未通过审核，请重新填写</div>
                                    <div class='hourglass2'>（原因：{{ruleForm.sAuditFailure}}）</div>
                                    
                                </el-row>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class='status-num'>
                        <el-col :span="13" :offset='4' class='contact'>
                            <el-form-item>
                                <el-row>
                                    <span>如有任何疑问，欢迎来电咨询。橘子股份客服电话：4006002588</span>
                                </el-row>
                                <el-row class='status-btn'>
                                    <el-button type="primary" @click="goMakeAccount">去填写</el-button>
                                </el-row>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
                <div class='status' v-if="temp=='4'">                 
                    <el-row class='status-num'>
                        <el-col :span="13" :offset='4'>
                            <el-form-item>
                                <el-row>
                                    <span class='hourglass'>您未填写账户，请填写账户</span>
                                </el-row>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class='status-num'>
                        <el-col :span="13" :offset='4' class='contact'>
                            <el-form-item>
                                <el-row>
                                    <span>如有任何疑问，欢迎来电咨询。橘子股份客服电话：4006002588</span>
                                </el-row>
                                <el-row class='status-btn'>
                                    <el-button type="primary" @click="goMakeAccount">去填写</el-button>
                                </el-row>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
                <div class='status' v-if="temp=='3'">                 
                    <el-row class='status-num'>
                        <el-col :span="13" :offset='4'>
                            <el-form-item>
                                <el-row>
                                    <span class='hourglass'>您的账户已被冻结</span>
                                </el-row>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class='status-num'>
                        <el-col :span="13" :offset='4' class='contact'>
                            <el-form-item>
                                <el-row>
                                    <span>如有任何疑问，欢迎来电咨询。橘子股份客服电话：4006002588</span>
                                </el-row>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
                <div class='status' v-if="temp=='1'">                 
                    <el-row class='status-num'>
                        <el-col :span="13" :offset='4'>
                            <el-form-item>
                                <el-row>
                                    <span class='hourglass'>审核中</span>
                                </el-row>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class='status-num'>
                        <el-col :span="13" :offset='4' class='contact'>
                            <el-form-item>
                                <el-row>
                                    <p>我们的工作人员会在2~3个工作日内审核完毕。</p>
                                    <span>如有任何疑问，欢迎来电咨询。橘子股份客服电话：4006002588</span>
                                </el-row>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </el-form>
    </div>
</template>

<script>
import Levelbar from '../layout/Levelbar';
import { getOrgAccountDetail } from 'api/accountMangement';
import pieChart from 'components/Echarts/pieChart';
import { mapGetters } from 'vuex';
export default{
    name: 'accountDetail',
    components: {Levelbar, pieChart},
    data() {
        return { 
            ruleForm: {
                account: '', // 账户
                bank: '', // 用户名
                phone: '', // 预留手机号
                affBank: '', // 所属银行
                bankCity: '', // 开户银行所在城市
                name: '', // 开户行名称
                sAuditFailure: ''
            },
            loading: true,
            temp: '',
            gaterName: '账户余额',
            pieDataList: [],
            rules: {}
        }
    },
    created() {
        this.getDetail();
    },
    computed: {
        ...mapGetters([
            'schoolId'
        ])
    },
    methods: {
        // 返回
        goMakeAccount() {
            this.$router.push({path: 'makeAccount'});
        },
        // 获取详情
        getDetail() {
            getOrgAccountDetail(this.schoolId).then(res => {
                this.loading=false;
                this.temp = res.data.content.sStatus;
                this.ruleForm.sAuditFailure = res.data.content.sAuditFailure || '暂无';
                if (this.temp == 0) {
                    this.ruleForm.name = res.data.content.sName;
                    this.ruleForm.account = res.data.content.fAccountId;
                    this.ruleForm.phone = res.data.content.fTelphoneNum;
                    this.ruleForm.affBank = res.data.content.bankName;
                    this.ruleForm.bankCity = res.data.content.sBankCityName;
                    this.ruleForm.bankName = res.data.content.sOpenName;
                    let unpay = res.data.content.unPay;
                    let inpay = res.data.content.inPay;
                    this.pieDataList = [
                        {
                            value: unpay,
                            name: '未结算' + unpay.toFixed(2) + '元',
                            itemStyle: {
                                normal: {
                                    color: '#C4B4E4'
                                }
                            }
                        },
                        { 
                            value: inpay,
                            name: '结算' + inpay.toFixed(2) + '元',
                            itemStyle: {
                                normal: {
                                    color: '#2EC7C9'
                                }
                            }
                        }
                    ]
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    position: relative;
    padding: 20px 20px 10px;
    .app-levelbar {
        height: 35px;
    }
    .el-form{
        box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        .box{
            padding:0 50px 200px 50px;
        }
        background:#fff;
        .appTop{
            position: relative;
            font-size: 14px;
            color: rgb(106, 85, 72);
            padding-left: 16px;
            margin: 30px 0;
            display: block;
            &::after {
                position: absolute;
                content:'';
                width: 4px;
                height: 14px;
                background: #ff5e2c;
                left: 0;
                top: 3px;
            }
        }
        .hourglass{
            font-family: MicrosoftYaHei;
            font-size: 30px;
            font-weight: normal;
            font-style: normal;
            font-stretch: normal;
            line-height: 46px;
            letter-spacing: 0.6px;
            color: #ff6633;
        }
        .hourglass2{
            font-family: MicrosoftYaHei;
            font-size: 15px;
            font-weight: normal;
            font-style: normal;
            font-stretch: normal;
            line-height: 46px;
            letter-spacing: 0.6px;
            color: #ff6633;
        }
        .contact{
            color: #ff6633;
            .status-btn{
                margin-top:30px;
                text-align:center
            }
        }
        .status-num .el-form-item .el-row{
            text-align:center
        }
        .status{
            width: 80%;
            margin:180px auto 0;
        }
        .appTitle{
            padding-top:8px;
            text-align: center;
            font-size: 18px;
            color: #333;
            line-height: 72px;
            font-weight: bold;
            font-family: Microsoft YaHei;
            border-bottom: 1px solid #ddd;
        }
        .contact-color{
            color:#999
        }
    }
    
}

</style>
